// 导航栏显示
.navigation_index {
    position: fixed;
    top: 0;
    width: 800rpx;
    height: 150rpx;
    background-color: #fff;
    margin: 0 auto;
    z-index: 999;
    transition: all 0.5s;

    .n_context {
        width: 100%;
        position: absolute;
        height: 80rpx;

        bottom: 0;
        font-size: 45rpx;

        .search_btn {
            margin-left: 40rpx;
            line-height: 80rpx;
            font-size: 45rpx;
            font-weight: 700;
        }

        .appName {
            position: absolute;
            text-align: center;
            line-height: 80rpx;
            left: 50%;
            margin-left: -12%;

        }
    }
}

// 添加清单按钮
.addFoodList {
    position: fixed;
    top: 75%;
    left: 30rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
    text-align: center;
    line-height: 80rpx;
    background-color: #f96650;
    z-index: 2;

    text {
        font-size: 45rpx;
        color: white
    }
}

//轮播图的css
.container {
    position: relative;

    swiper {

        height: 650rpx;
        position: relative;

        swiper-item {
            position: relative;
            display: flex;
            justify-items: center;
            flex-flow: row wrap;

            image {
                width: 100%;
                height: 100%;
            }

            .slide-description {
                position: fixed;
                display: flex;
                flex-flow: column wrap;
                justify-items: center;
                bottom: 120rpx;
                left: 40rpx;
                color: white;
                font-size: 25rpx;

                text:first-child {
                    font-size: 40rpx;
                    font-weight: 700;
                    margin-bottom: 15rpx;
                }
            }
        }


    }

    .custom-pagination {
        position: absolute;
        /* 绝对定位 */
        bottom: 85rpx;
        /* 根据需要调整位置 */
        left: 10%;
        /* 水平居中 */
        transform: translateX(-50%);
        /* 水平居中 */
        display: flex;
        /* 使用flex布局 */
        justify-content: center;


        /* 水平居中对齐 */
        .pagination-bullet {
            width: 10rpx;
            /* 指示点的宽度 */
            height: 10rpx;
            /* 指示点的高度 */
            background: #ccc;
            /* 指示点的背景颜色 */
            border-radius: 50%;
            /* 指示点的形状 */
            margin: 0 6rpx;
            /* 指示点之间的间距 */
            transition: all 0.5s;
            // 变化的过度时间
        }

        .pagination-bullet.active {
            width: 30rpx;
            /* 选中时的指示点宽度 */
            height: 8rpx;
            /* 选中时的指示点高度 */
            background: #fff;
            /* 选中时的指示点背景颜色 */
            border-radius: 4px;
            /* 选中时的指示点形状 */
        }
    }
}

// 搜索的css（单纯显示）
.selectBox {
    width: 100%;
    height: 80rpx;
    position: relative;

    text {
        text-align: center;
        line-height: 100rpx;
        font-size: 40rpx;
        font-weight: 1;
        position: absolute;
        background-color: #fff;
        color: #494949;
        width: 600rpx;
        height: 100rpx;
        border-radius: 50rpx;
        box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.9);
        top: -10%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

//直播栏
.living {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 30rpx;

    .type {
        font-size: 30rpx;
        color: #fe6045;
        font-weight: 700;

    }

    .type::before {
        content: "\100d9";
        padding-right: 8rpx;

    }

    .li-context {
        display: flex;
        flex-flow: column nowrap;
        line-height: 40rpx;
    }

    .booking {
        text-align: center;
        line-height: 60rpx;
        font-weight: 700;
        background-color: #f2f2f2;
        color: #5c5e57;
        width: 100rpx;
        height: 60rpx;
        border-radius: 20rpx;

    }
}

// 浮空弹窗Living
.living_booking {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;

    .live_down {
        margin: 10rpx 0 30rpx 0;
        font-size: 40rpx;
        width: 60rpx;
        height: 40rpx;
        border-radius: 15rpx;
        color: #838383;
        background-color: #f0f0f0;
    }

    .live_font {
        font-size: 100rpx;
        font-weight: 700;
        color: #e43224;
        margin-bottom: 30rpx;
    }

    .live_title {

        font-size: 35rpx;
        margin-bottom: 10rpx;
    }

    .live_title::after {
        content: '\e8bd';
        color: #2e55f1;
        margin-left: 10rpx;
    }

    .live_video::before {
        font-size: 50rpx;
        vertical-align: middle;
        content: '\e6dd';
        color: #faa041;
        margin-right: 10rpx;

    }

    .live_video {
        font-size: 30rpx;
        margin-bottom: 30rpx;
        color: #656262;
    }

    .live_time {
        font-size: 35rpx;
        padding-bottom: 10rpx;
    }

    .live_content {
        font-size: 30rpx;
        color: #656262;
    }

    .booking_btn {
        width: 340rpx;
        height: 80rpx;
        color: white;
        line-height: 80rpx;
        font-size: 35rpx;
        border-radius: 20rpx;
        background-color: #e9624d;
        margin-top: 80rpx;
    }



}

.is_booking {
    background-color: #a9a6a6 !important;
}

// hot栏
.hots {
    margin-top: 40rpx;
    padding: 0 20rpx;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;

    .hotItem {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        width: 100rpx;
        height: 120rpx;

        image {
            width: 80rpx;
            height: 80rpx;
            margin: 0 auto;
        }

        text {
            margin-top: 5rpx;
            font-size: 20rpx;
            width: 100rpx;
            text-align: center;
        }
    }
}

// 菜谱列表
.menus {
    position: relative;
    display: flex;
    width: 680rpx;
    margin: 50rpx auto;
    flex-flow: row wrap;

    // 选择奇数
    .menuItem:nth-child(2n+1) {
        margin-right: 40rpx;
    }

    .menuItem {
        display: flex;
        flex-flow: column wrap;
        justify-content: space-around;
        margin-bottom: 40rpx;
        width: 320rpx;

        image {
            box-shadow: 0 0 1rpx rgba(0, 0, 0, 0.4);
            border-radius: 20rpx;
            width: 320rpx;
            height: 320rpx;
        }

        text {
            font-weight: 800;
            width: 320rpx;
            white-space: wrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            /* Number of lines to show */
            -webkit-box-orient: vertical;
        }
    }

    .limit-mask {
        position: absolute;
        padding: 0 -40rpx;
        width: 100%;

        bottom: 0;
        left: 0;

        .limit-mask-wall::before {
            display: block;
            content: "";
            height: 80%;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));

        }

        .limit-mask-wall::after {
            display: block;
            content: "";
            height: 20%;
            background-color: #fff;
        }

        .limit-mask-wall {
            height: 500rpx;
            z-index: 2;
        }



        .limit-mask-tip {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease 0s;
            background-color: #dff6fd;
            color: #34bff0;
            height: 100rpx;
            border-radius: 35rpx;
        }


    }
}